<template>
	<view class="information">
		<seacrhHeader @searchclick="open" />
		<view class="top-menu-view">
			<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum' + item.id" :key="item.id"
				@click="swichMenu(item.id)">
				<view :class="currentTab == item.id ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{ item.name }}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="competion" v-show="tabCurrent == 'tabNum0' ? true : false">
				<competion @updateTotal="updateTotal" @cloesNgnationLoading="cloesNgnationLoading"
					:competionLimit="competionLimit" @updatecompetionDone="updatecompetionDone" ref="competion" />
			</view>
			<view class="xiangmu" v-show="tabCurrent == 'tabNum1' ? true : false">
				<view class="box">
					<item ref="item" @cloesNgnationLoading="cloesNgnationLoading" :xiangmuList="xiangmuList"
						@updateTotal="updateTotal" :xiangmuLimit="xiangmuLimit"
						@updatexiangmuDone="updatexiangmuDone" />
				</view>
			</view>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			@trigger="trigger" :direction="direction" />
		<uni-popup ref="popup" type="center">
			<competionSearch @closePopup="closePopup" @searctReload="searctReload" v-if="currentTab==0" />
			<projectSearch @closePopup="closePopup" @searctReload="searctReload" v-if="currentTab==1" />
		</uni-popup>
	</view>
</template>

<script>
	import competionSearch from './src/competionSearch.vue'
	import projectSearch from './src/projectSearch.vue'
	import seacrhHeader from '@/components/common/seacrhHeader/index.vue'
	import competion from "@/components/information/competion.vue";
	import item from "@/components/information/item.vue";
	export default {
		data() {
			return {
				refreshcompetionSearch: true,
				focus: false,
				paginationLoading: false,
				horizontal: "right",
				vertical: "bottom",
				direction: "vertical",
				content: [{
						iconPath: "/static/bisai.png",
						selectedIconPath: "/static/bisaiChecked.png",
						text: "发比赛",
						active: false,
					},
					{
						iconPath: "/static/xiangmu.png",
						selectedIconPath: "/static/xiangmuChecked.png",
						text: "发项目",
						active: false,
					},
					{
						iconPath: "/static/history.png",
						selectedIconPath: "/static/historyChecked.png",

						text: "记录",
						active: false,
					},
				],
				pattern: {
					color: "#7A7E83",
					backgroundColor: "#fff",
					selectedColor: "#007AFF",
					buttonColor: "#007AFF",
					iconColor: "#fff",
				},
				tabCurrent: "tabNum0",
				currentTab: 0,
				tabs: [{
						id: 0,
						name: "比赛",
					},
					{
						id: 1,
						name: "项目",
					},
				],
				//分页比赛
				competionDone: false,
				competionList: [],
				competionIndex: 1,
				competionLimit: 10,
				//项目
				xiangmuDone: false,
				xiangmuList: [],
				xiangmuIndex: 1,
				xiangmuLimit: 10,
			};
		},
		components: {
			competion,
			item,
			seacrhHeader,
			competionSearch,
			projectSearch
		},

		onReachBottom() {
			console.log("onReachBottom", 104);
			if (this.paginationLoading) return;
			if (this.currentTab == 0 && this.competionDone) return;
			if (this.currentTab == 1 && this.xiangmuDone) return;
			this.paginationLoading = true;

			if (this.currentTab == 0) {
				this.competionReload();
				return;
			}
			if (this.currentTab == 1) {
				this.xiangmuReload();
				return;
			}
		},
		methods: {
			// maskClick() {
			// 	this.refreshcompetionSearch = false
			// 	this.$nextTick(() => {
			// 		this.refreshcompetionSearch = true
			// 	})
			// },
			closePopup() {
				console.log('closePopup');
				this.$refs.popup.close()
			},
			searctReload(data) {
				//先重置当前比赛分页状态
				console.log('searctReload');
				if (this.currentTab == 0) {
					this.competionDone = false
					this.competionList = []
					this.competionIndex = 1
					this.$nextTick(() => {
						this.$refs.competion.reloadSearch(data)
					})
					return
				}
				if (this.currentTab == 1) {
					this.xiangmuDone = false
					this.xiangmuList = []
					this.xiangmuIndex = 1
					this.$nextTick(() => {
						this.$refs.item.reloadSearch(data)
					})
					return
				}

			},
			// 弹出框
			open() {
				this.$refs.popup.open("top");
			},
			//比赛分页触发
			competionReload() {
				console.log("reload");
				const obj = this.competionList[this.competionIndex++];

				this.$eventBus.$emit("competionReload", obj);
			},
			//项目分页触发
			xiangmuReload() {
				const obj = this.xiangmuList[this.xiangmuIndex++];
				this.$eventBus.$emit("xiangmuReload", obj);
			},
			//关闭loading
			cloesNgnationLoading() {
				this.paginationLoading = false;
			},
			//通知比赛分页结束
			updatecompetionDone() {
				this.competionDone = true;
			},
			//通知项目分页结束
			updatexiangmuDone() {
				this.xiangmuDone = true;
			},
			//更新分页total
			updateTotal(total, type) {
				if (type == "competion") {
					//比赛
					const competionList = this.updatepaging(total);
					this.competionList = competionList;
					console.log(this.competionList, 146);
					return;
				}
				if (type == "xiangmu") {
					//项目
					const xiangmuList = this.updatepaging(total);
					this.xiangmuList = xiangmuList;
					console.log(xiangmuList, 156);
					return;
				}
			},
			//更新分页区间子段
			updatepaging(total) {
				//默认limie为10
				let limit = 10;
				const countList = [];
				if (total >= limit) {
					const pageMath = Math.ceil(total / limit); //向上取整 3
					const pageSmall = Math.floor(total / limit); //向下取整 2
					for (let index = 0; index < pageMath; index++) {
						if (index == pageMath - 1) {
							//最后一页，设置为true
							countList.push({
								page: pageMath,
								limit: limit,
								done: true,
							});
						} else {
							//不是最后一页，设置为false
							countList.push({
								page: index + 1,
								limit: limit,
								done: false,
							});
						}
					}
				}
				console.log(countList, 163);
				return countList;
			},
			trigger(e) {
				const token = this.$token;
				if (token == "" || !token) {
					this.$errMessageToast("请绑定五邑大学账号");
					return;
				}
				for (let index = 0; index < this.content.length; index++) {
					this.content[index].active = false;
				}
				this.content[e.index].active = true;
				switch (e.item.text) {
					case "记录":
						uni.navigateTo({
							url: "/pages/information/src/history",
						});
						break;
					case "发比赛":
						uni.navigateTo({
							url: "/pages/information/src/addProject",
						});
						break;
					case "发项目":
						uni.navigateTo({
							url: "/pages/information/src/addItem",
						});

						break;
				}
			},
			swichMenu(id) {
				this.currentTab = id;

				this.tabCurrent = "tabNum" + id;
			},
			swiperChange(e) {
				let index = e.detail.current;
				this.swichMenu(index);
			},
		},
		created() {

		},
	};
</script>

<style scoped lang="less">
	.information {
		background-color: #fdfdfd;
		height: auto;
		min-height: 100%;
		padding-bottom: 20rpx;


		.popup {
			height: 100rpx;
		}


		.warp {
			padding: 10px;
		}

		.button {
			margin-bottom: 10px;
		}

		.top-menu-view {
			display: flex;
			white-space: nowrap;
			width: 100%;
			background-color: #ffffff;
			height: 86rpx;
			line-height: 86rpx;

			.menu-topic-view {
				display: inline-block;
				white-space: nowrap;
				height: 86rpx;
				position: relative;
				width: 50%;

				.menu-topic-text {
					font-size: 30rpx;
					color: #303133;
					padding: 10rpx 40rpx;
					text-align: center;
					display: block;
				}

				.menu-topic-bottom {
					position: absolute;
					bottom: 0;
					width: 100%;

					.menu-topic-bottom-color {
						width: 40rpx;
						height: 4rpx;
					}
				}

				.menu-topic-act .menu-topic-bottom {
					display: flex;
					justify-content: center;
				}

				.menu-topic-act .menu-topic-bottom-color {
					background: #3d7eff;
				}
			}
		}

		.tab {
			height: 80rpx;

			.xiangmu {
				width: 150rpx;
				height: 100%;
				background-color: red;
				display: inline-block;
			}

			.tabBox {
				width: 150rpx;
				height: 100%;
				background-color: green;
				display: inline-block;
			}
		}
	}
</style>
